import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import { TableC, IconC } from '../../../../comps';
import IconSuccess from '../../../../assets/busi/systemManagement/valuationAnalysis/icon_success.png';
import IconFailure from '../../../../assets/busi/systemManagement/valuationAnalysis/icon_failure.png';
import IconApplying from '../../../../assets/busi/systemManagement/valuationAnalysis/icon_applying.png';
import { exportFile } from '../../../../utils/commonFunc';

@connect(({ valuationAnalysisM, loading }) => ({
  valuationAnalysisM,
  tableLoading: loading.effects['valuationAnalysisM/getAnalysisRecord'],
}))
export default class AnalysisRecord extends PureComponent {
  state = {
    pageInfo: {
      currentPage: 1, // 当前页
      numInPage: 10, // 分页条数
      total: 0, // 总页数
    },
    dataSource: [], // 表格数据
    columns: [], // 表头
  };

  componentDidMount() {
    this.getTableData();
  }

  // 获取表格数据
  getTableData = () => {
    const that = this;
    const {
      pageInfo: { currentPage, numInPage },
    } = this.state;
    const { dispatch, infoDetail } = this.props;
    dispatch({
      type: 'valuationAnalysisM/getAnalysisRecord',
      payload: {
        id: infoDetail?.id,
        currentPage,
        numInPage,
      },
      callback: (type, data) => {
        if (type == 'success') {
          that.setState({
            columns: data.columns,
            dataSource: data.dataSource,
            pageInfo: data.pageInfo,
          });
        }
      },
    });
  };

  // 表格页码变化
  tableOnChange = (pagination) => {
    const { pageInfo } = this.state;
    this.setState(
      {
        pageInfo: {
          ...pageInfo,
          currentPage: pagination.current, // 当前页
          numInPage: pagination.pageSize, // 分页条数
        },
      },
      () => {
        this.getTableData();
      },
    );
  };

  // 下载请求文件流
  downloadFile = (id, obj) => {
    const arr = id.split(',');
    const query = [];
    arr.length &&
      arr.map((item) => {
        query.push({ value: item });
      });
    exportFile('gateway/file/maat-admin/file/download', query, true);
  };

  render() {
    const { dataSource, columns, pageInfo } = this.state;
    const { tableLoading } = this.props;
    let columnsNew = JSON.parse(JSON.stringify(columns));
    if (columnsNew.length) {
      columnsNew.forEach((item) => {
        if (item.key === 'fileName') {
          item.ellipsis = true;
          item.render = (text, record) => {
            return (
              <a title={text} onClick={() => this.downloadFile(record.fileId, { name: record.fileName })}>
                {text}
              </a>
            );
          };
        }
        if (item.key === 'status') {
          item.width = 150;
          item.render = (text, record) => {
            if (record.status == '1') {
              return (
                <div>
                  <img style={{ width: '14px', width: '14px' }} src={IconSuccess} />
                  &nbsp;解析成功&nbsp;
                  {record.info ? (
                    <Tooltip title={record.info}>
                      <InfoCircleOutlined style={{ color: '#4376FF' }} />
                    </Tooltip>
                  ) : null}
                </div>
              );
            }
            if (record.status == '0') {
              return (
                <div>
                  <img style={{ width: '14px', width: '14px' }} src={IconApplying} />
                  &nbsp;申请中&nbsp;
                </div>
              );
            }
            if (record.status == '2') {
              return (
                <div>
                  <img style={{ width: '14px', width: '14px' }} src={IconFailure} />
                  &nbsp;解析失败&nbsp;
                  {record.info ? (
                    <Tooltip title={record.info}>
                      <InfoCircleOutlined style={{ color: '#4376FF' }} />
                    </Tooltip>
                  ) : null}
                </div>
              );
            }
            return '';
          };
        }
      });
    } else {
      columnsNew = [];
    }
    return (
      <TableC
        columns={columnsNew}
        dataSource={dataSource}
        loading={tableLoading}
        onChange={this.tableOnChange}
        current={pageInfo.currentPage}
        total={pageInfo.total}
        pageSize={pageInfo.numInPage}
        scroll={{ y: '300px' }}
        rowKey='id'
      />
    );
  }
}
